<template>
  <div class="content">
    <el-dialog :title="title" width="980px" class="icon-dialog" top="5vh" :visible.sync="show" @open="open" :before-close="closeForm">
      <div class="search_option">
        <el-select v-model="page_data.search_type" placeholder="请选择搜索类型" size="small">
          <el-option
              v-for="item in searchOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>&nbsp;
        <el-input size="small" v-model="page_data.search_value" placeholder="请输入" clearable style="width: 220px;"></el-input>&nbsp;
        <el-button type="primary" size="small" @click="getList">搜索</el-button>
      </div>

      <div>
        <el-table
            :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
            v-loading="loading"
            highlight-current-row ref="multipleTable"
            border
            class="eltable"
            :data="list"   style="width: 100%"  >
          <el-table-column  property="name"  label="业务名称"></el-table-column>
          <el-table-column  property="alias_name"  label="别名"></el-table-column>
          <el-table-column  property="code"  label="业务编码"></el-table-column>
          <el-table-column  property="assoc_app_name"  label="关联应用"></el-table-column>
          <el-table-column label="操作" width="230">
            <template slot-scope="scope">
              <router-link :to="{path: '/user/basic/edit', query:{id: scope.row.id}}"  target="_blank">
                <el-button size="mini" type="primary" >查看</el-button>
              </router-link>&nbsp;
              <router-link :to="{path: '/user/basic/manage', query:{bid: scope.row.id,name:scope.row.name}}" v-if="scope.row.level == 1" target="_blank">
                <el-button size="mini" type="primary" ><i class="el-icon-setting" />管理</el-button>
              </router-link>&nbsp;
              <el-button type="danger" size="mini" @click="setChecked(scope.row)" v-if="checkedItem.business_id!=scope.row.id">选择</el-button>
              <el-button type="info" size="mini" @click="clearChecked()" v-else>取消选择</el-button>

            </template>
          </el-table-column>
        </el-table>
        <div class="pagination">
          <Page :total="page_data.total" :page.sync="page_data.page" :limit.sync="page_data.limit" @pagination="getList" />
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="medium" :loading="loading" type="primary" @click="submit" >确 定</el-button>
        <el-button size="medium" @click="closeForm">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getList} from '@/api/user/basic'
import Page from '@/components/common/Page.vue'

export default {
  name: "dialogOption",
  components: {Page},
  props: {
    show: {
      type: Boolean,
      default: false
    },
    index: {
      type: Number,
      default: -1
    }
  },
  data() {
    return {
      title: '添加选项',
      loading: false,
      list: [],
      checkedItem: {
        business_id: '',
        business_name: ''
      },
      page_data: {
        page: 1,
        limit: 10,
        total: 0,
        type: 0,
        status: 1,
        search_type: '',
        search_value: ''
      },
      searchOptions: [
        {label: '业务名称', value: 'name'},
        {label: '业务编码', value: 'code'}
      ]
    }
  },
  methods: {
    open() {
      this.getList()
    },
    getList() {
      getList(this.page_data).then(res => {
        if (res.code == 0) {
          this.page_data.total = res.data.count
          this.list = res.data.list
        }
      })
    },
    setChecked(row) {
      this.checkedItem = {
        business_id: row.id,
        business_name: row.name
      }
    },
    clearChecked() {
      this.checkedItem = {
        business_id: '',
        business_name: ''
      }
    },
    submit() {
      if (this.checkedItem.business_id == '') {
        this.$message.error('请选择业务项')
        return false
      }
      this.checkedItem.index = this.index
      this.$emit('callFn', this.checkedItem)
      this.closeForm()
    },
    closeForm(){
      this.checkedId = ''
      this.$emit('update:show', false)
    },
  }
}
</script>

<style scoped>
.search_option {
  margin: 10px 0 10px 0;
}
</style>